<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <h1>{{c.gradeLevel}}{{c.name}} 班主任：{{c.teacherName}}</h1>
  <input type="text" placeholder="姓名" v-model="s.name">
  <input type="text" placeholder="年龄" v-model="s.age">
  <input type="text" placeholder="性别" v-model="s.gender">
  <input type="button" value="添加学生" @click="insert()">
  <table border="1">
    <caption>学生列表</caption>
    <tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr>
    <tr v-for="(stu,i) in arr">
      <td>{{i+1}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.gender}}</td>
      <td><a href="javascript:void(0)" @click="del(stu.id)">删除</a></td>
    </tr>
  </table>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        s:{},
        c:{},
        arr:[]
      }
    },
   methods:{
      insert(){
        /*v.s.classId = v.c.id;*/
        v.s.classId = new URLSearchParams(location.search).get("id");
        axios.post("/student/insert",v.s).then(function (response) {
          location.reload();
        })
      },
     del(id){
        if(confirm("确认删除此学生么？")){
          axios.post("/student/delete?id="+id).then(function (response) {
            location.reload();
          })
        }
     }
   },
   created:function () {
      axios.get("/class/selectById"+location.search).then(function (response) {
        v.c = response.data;
      })
     axios.get("/student/selectByCid"+location.search).then(function (response) {
       v.arr = response.data;
     })
   }
  })
</script>
</html>